<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/echarts/echarts.js"></script>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>统计分析<small>会员统计</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>统计分析</el-breadcrumb-item>
            <el-breadcrumb-item>会员统计</el-breadcrumb-item>
            <el-breadcrumb-item>{{itemName}}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <div>
                <template>
                    <el-date-picker
                            v-model="time"
                            align="right"
                            type="date"
                            placeholder="选择日期查询会员人数"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            @change="dateChangeBeginTime"
                            :picker-options="pickerOptions1">
                    </el-date-picker>
                    <el-date-picker
                            v-model="monthtime"
                            align="right"
                            type="month"
                            placeholder="选择月份查询预约人数"
                            value-format="yyyy-MM"
                            format="yyyy-MM"
                            @change="dateChangeBeginMonthTime"
                            :picker-options="pickerOptions">
                    </el-date-picker>
                    <!--<el-button @click="memberCount">会员统计</el-button>-->
                    <!--<el-button @click="memberOrder">会员预约统计</el-button>-->
                </template>

            </div>
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="chart1" style="height:600px;"></div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            time:'',
            monthtime:'',
            itemName:'会员数量统计'
        },
        created()
        {
            // var today = new Date();
            // var year = today.getFullYear();
            // var month = today.getMonth() + 1;//0表示1月，1表示2月
            // var day = today.getDate();
            // this.time=year + "-" + month + "-" + day;
            this.baseMethod();
        },
        methods:{
            memberCount(){
                if(this.time==null)
                {
                    this.baseMethod();
                    return;
                }
                this.itemName='会员数量统计';
                axios.get("/report/getMemberByDate.do?date="+this.time).then((res)=>{
                    if(res.data.flag)
                    {
                        myChart1.setOption({
                            title: {
                                text: '会员当天总数统计'
                            },
                            legend: {
                                data:['会员数量']
                            },
                            color: ['#3398DB'],
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    data: res.data.data.selectDate,
                                    axisTick: {
                                        alignWithLabel: true
                                    }
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    name: '会员数量',
                                    type: 'bar',
                                    barWidth: '60%',
                                    data: res.data.data.membersCount
                                }
                            ]
                        })
                    }
                })
            },
            memberOrder(){
                if(this.monthtime==null)
                {
                    this.itemName='会员数量统计',
                        this.baseMethod();
                    return;
                }
                this.itemName='会员当月预约统计',
                    axios.get("/report/getMemberOrder.do?month="+this.monthtime).then((res)=>{
                        if(res.data.flag)
                        {
                            myChart1.setOption(
                                {
                                    title: {
                                        text: '会员当月预约统计'
                                    },
                                    color: ['#3398DB'],
                                    legend: {
                                        data:['会员当月预约数量']
                                    },
                                    tooltip: {
                                        trigger: 'axis',
                                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                        }
                                    },
                                    grid: {
                                        left: '3%',
                                        right: '4%',
                                        bottom: '3%',
                                        containLabel: true
                                    },
                                    xAxis: [
                                        {
                                            type: 'category',
                                            data: res.data.data.month,
                                            axisTick: {
                                                alignWithLabel: true
                                            }
                                        }
                                    ],
                                    yAxis: [
                                        {
                                            type: 'value'
                                        }
                                    ],
                                    series: [
                                        {
                                            name: '会员当月预约数量',
                                            type: 'bar',
                                            barWidth: '60%',
                                            data: res.data.data.monthMember
                                        }
                                    ]
                                });
                        }

                    });
            },
            baseMethod(){
                axios.get("/report/getMemberReport.do").then((res)=>{
                    myChart1.setOption(
                        {
                            title: {
                                text: '会员数量'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data:['会员数量']
                            },
                            xAxis: {
                                data: res.data.data.months
                            },
                            yAxis: {
                                type:'value'
                            },
                            series: [{
                                name: '会员数量',
                                type: 'line',
                                data: res.data.data.memberCount
                            }]
                        });
                });
            },
            dateChangeBeginTime()
            {
                this.memberCount();
            },
            dateChangeBeginMonthTime()
            {
                this.memberOrder()
            }
        }
    })
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('chart1'));

    // 使用刚指定的配置项和数据显示图表。
    //myChart.setOption(option);


</script>
</html>
